<template>
    <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="会员卡管理" name="first">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span style="color: gray;">非认证服务号不可开启微信原生会员卡功能支持</span>&nbsp;
                        <el-button style=" padding: 3px 0" type="text" v-if="showlist" @click="Edit()">编辑会员卡</el-button>
                        <el-button style=" padding: 3px 0" type="text" v-if="showlist == false" disabled>编辑会员卡</el-button>
                        <el-button style=" padding: 3px 0" type="text" v-if="showlist" @click="show()">停用</el-button>
                        <el-button style=" padding: 3px 0" type="text" v-if="showlist == false"
                            @click="show2()">启用</el-button>
                        <br>
                        <span style="color: gray;">微信原生会员卡功能可允许会员将邻取的会员卡同步至微信卡包并使用</span>&nbsp;
                        <el-link href="https://kf.qq.com/faq/120911VrYVrA150930ZjeMNf.html" target="_blank"
                            type="primary">了解详情</el-link>

                    </div>
                    <div>
                        <h4>基本设置</h4>
                        <span>会员卡标题 {{ form.vipTitle }}</span>
                    </div>
                </el-card>
                <el-card class="box-card">
                    <div>
                        <h4>会员详情</h4>
                        <el-row>
                            <el-col :span="12">
                                <span>特权介绍 </span>
                            </el-col>
                            <el-col :span="12">
                                <span><el-input type="textarea" :rows="2" placeholder="请输入内容"
                                        v-model="form.privilegeDeclaration">
                                    </el-input>
                                </span>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <span>使用须知 </span>
                            </el-col>
                            <el-col :span="12">
                                <span><el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.noticeForUse">
                                    </el-input>
                                </span>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="等级设置" name="second">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>等级规则</span>
                    </div>
                    <div>
                        <span>成长值依据:
                            <el-radio-group v-model="VIPform.growthValueBasis">
                                <el-radio :label="1">累计消费</el-radio>
                                <el-radio :label="2">累计积分</el-radio>
                                <el-radio :label="3">累计间页数</el-radio>
                            </el-radio-group>
                        </span><br>
                        <span v-show="VIPform.growthValueBasis == 1">累计消费1元</span>
                        <span v-show="VIPform.growthValueBasis == 2">累计1积分</span>
                        <span v-show="VIPform.growthValueBasis == 3">累计1间夜</span>
                        <span>默认成长值为<el-input v-model="VIPform.growthValue" placeholder="请输入内容"
                                style="width: 100px;"></el-input></span>
                        <span style="color: gray;">输入1到1000,000的整数</span>
                    </div>
                    <div>
                        <span>成长值清除规则:
                            <el-radio-group v-model="VIPform.clearRule">
                                <el-radio :label="1">永久有效</el-radio>
                                <el-radio :label="2"> 每个自然年扣除成长值</el-radio>
                            </el-radio-group>
                        </span>
                    </div>
                </el-card>
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>基本信息</span>
                    </div>
                    <div>
                        <span>
                            <div style="background-color: #fff">
                                <el-row>
                                    <el-col :span="8"> <span>等级编号</span></el-col>
                                    <el-col :span="8"><span>等级名称</span></el-col>
                                    <el-col :span="8"><span>成长值范围</span></el-col>
                                </el-row>
                            </div>
                        </span>
                        <span>
                            <div style="background-color: #fff">
                                <span v-for="item in items" :key="item">
                                    <span>
                                        <el-form ref="form" :model="form" label-width="80px">
                                            <el-row>
                                                <el-col :span="8">
                                                    {{ item }}
                                                </el-col>
                                                <el-col :span="8">
                                                    <el-form-item>
                                                        <el-input v-model="form.name" style="width: 200px;"></el-input>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="8">
                                                    <el-form-item>
                                                        0-<el-input v-model="form.name" style="width: 200px;"></el-input>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                        </el-form>
                                    </span>
                                </span>
                            </div>
                        </span>
                        <br>
                        <span>
                            <el-button @click="AddDengji()">添加等级</el-button>
                            <el-button @click="deletedengji()">删除等级</el-button>
                        </span>
                    </div>
                </el-card>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import { Find } from "@/api/VIP";
export default {
    data() {
        return {
            form: {
                id: '',
                brandName: '',
                vipPicture: '',
                vipTitle: '',
                vipTime: '',
                privilegeDeclaration: '',
                noticeForUse: ''
            },
            showlist: true,
            activeName: 'first',
            VIPform: {
                greadName: '',
                growthValueBasis: 3,
                growthValue: 1,
                clearRule: 0,
                growthRange: ''
            },
            VId: 0,
            items: [],
        }
    },
    methods: {
        deletedengji() {
            this.items.pop();
            this.VId = this.VId - 1;
        },
        AddDengji() {
            this.VId++;
            this.items.push(this.VId);
        },
        FindVIPCard(Id) {
            Find(Id).then(res => {
                this.form = res.data;
            })
        },
        show() {
            this.$confirm('确定要停用吗?, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.showlist = false
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消停用'
                });
            });

        },
        show2() {
            this.$confirm('确定要启用吗?, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.showlist = true
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消停用'
                });
            });

        },
        Edit() {
            this.$router.push('VIPEdit')
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },

    },
    created() {
        this.form.id = window.localStorage.getItem("VIPId");
        console.log(this.form.id)
        this.FindVIPCard(this.form.id);
    }
}
</script>
<style></style>